<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 视图  view -->
    <div id="app">
        <p>{{message}}</p>
        <p>{{count}}</p>
        <p>{{bool}}</p>
    </div>
</body>
<script>

    // Vue的特征:
    // 1. 声明式渲染 
    // 2. 响应式

    // 注意:
    // 1. Vue实例中挂载的数据,只能在挂载的元素内的模板语法中使用
    // 2. Vue实例中如果数据发生改变, 对应的视图也会更新 (Vue内部已经实现)
    // 3. 为了方便操作数据 调用方法 => options配置的 data相关的数据, methods相关的方法,以及计算属性,都会在实例化对象中绑定一份  


    // Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

    // Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

    // 在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。


    // Vue实例(应用)   => 控制层 View Model
    var vm = new Vue({
        el:"#app",  // 挂载的元素
        // 数据层 Model
        data:{   // 挂载的数据  => 可以在挂载的元素中对应属性名将属性值渲染到元素中
            message:"hello world",
            count:100,
            bool:true,
        },
        methods:{ // 挂载的方法 => 方法可以有多个
            addCount:function(){
                console.log(this); //this -> 当前vue实例
                this.count ++;
            }
        },
        // 默认情况下使用挂载的元素的html结构(outerHTML)作为模板,但是如果options中传入了template, 将会使用传入字符串作为默认
        template:`<div id="app">
                    <div>{{message}}----{{count}}----{{bool}}</div>
                </div>`,

    })
    console.log(vm);

    document.onclick = function(){
        // console.log(vm);
        vm.addCount();
    }



</script>
</html>